<template>
  <div class="dialog-wrapper">
    <Modal
      :title="this.$t('m.bqpz')"
      width="1080"
      footer-hide
      :value="value"
      :mask-closable="false"
      @on-cancel="handleCancel">
      <div class="modal-inner">
        <Spin size="large" fix v-if="spinStatus"></Spin>
        <Row>
          <Col
            span="8"
            v-for="(item, index) in options.list"
            :key="index"
            class="label-col"
            :class="{ 'label-active': item.labelId == options.labelId }">
            <div class="label-box" @click="handleLabel(item.labelId,item.labelName)">
              <p class="l-name">{{ item.labelName }}</p>
              <p class="l-remark">{{ item.labelRemark }}</p>
            </div>
          </Col>
        </Row>
      </div>
    </Modal>
  </div>
</template>

<script>

  export default {
    name: 'dialogLabel',
    props: {
      value: {
        type: Boolean,
        default: true
      },
      options: {
        type: Object,
        default: function() {
          return {
            labelId:'',
            UserId: '',
            list: []
          }
        }
      }
    },
    data () {
      return {
        spinStatus: false,
        labelList: []
      }
    },
    watch: {
      options () {
        // if (newValue) {
        //   this.getCollectionLabelList();
        // }
      }
    },
    methods: {
      // 获取标签列表
      getCollectionLabelList() {
        this.labelList = [{label:this.$t('m.Yǒuhuánkuǎnyìyuàn'),remark:this.$t('m.yǒuhuánkuǎnyìyuànmiáoshù')},
                          {label:this.$t('m.dìsānfāngzhuǎngào'),remark:this.$t('m.dìsānfāngzhuǎngàomiáoshù')},
                          {label:this.$t('m.dìsānfāngdàicháng'),remark:this.$t('m.dìsānfāngdàichángmiáoshù')},
                          {label:this.$t('m.qīzhàpiàndài'),remark:this.$t('m.qīzhàpiàndàimiáoshù')},
                          {label:this.$t('m.wúhuánkuǎnnénglì'),remark:this.$t('m.wúhuánkuǎnnénglìmiáoshù')}
        ]
        this.spinStatus = false;
        // this.$http.get('/helsinki/admin/collection-label', {
        //   page: 1,
        //   pageSize: 20
        // }).then(({ data: { data, errcode, info } }) => {
        //   if (errcode == 0) {
        //     this.labelList = data;
        //   }
        //   this.spinStatus = false;
        // }).catch(err => { console.log(err); });
      },
      // 选择标签
      handleLabel(id,labelName) {
        // debugger
        if (this.options.label === 'label') return;
        this.$http.post('/api/laocai/remind/label/user', {
          labelId:id,
          labelName: labelName,      
          userId: this.options.UserId
        }).then((res) => {
          if(res.body.code == 0) {
            // this.$Message.success('标签配置成功');
            this.$emit('ok');
          }          
          this.$Message.success(this.$t('m.errorCode' + res.body.code));
          this.spinStatus = false;
        }).catch(err => { });
      },
      // 取消事件
      handleCancel() {
        this.$emit('input', false);
      }
    }
  }
</script>

<style lang="scss">
  .ivu-col-span-8 {
    padding: 10px;
    cursor: pointer;
  }

  .modal-inner {
    position: relative;
  }

  .label-col {
    .label-box {
      padding: 12px;
      border: 1px solid #dcdee2;
      border-radius: 4px;
      transition: all .2s ease-in-out
    }
    .l-name {
      margin-bottom: 5px;
      font-size: 15px;
    }

    .l-remark {
      font-size: 12px;
    }
  }

  .label-active {
    .label-box {
      color: #ffffff;
      background: #2db7f5;
      font-weight: bold;
      border-style: #2db7f5;
    }
  }
</style>
